<template>
  <div class="home-asideMenu">
    <!-- 外层 -->
    <el-collapse v-model="collapse.active" accordion>
      <el-collapse-item v-for="item in collapse.value" :key="item.id" :name="item.id">
        <template #title>
          <div class="collapse-nowarp">{{ item.title }} <i
              @click.stop="settingFn({ filename: item.title, type: 'dir', id: item.id, filepath: dirPath })"
              :style="{ backgroundImage: 'url(' + settingPng + ')' }"></i></div>
        </template>
        <div class="collapse-div" :style="{ height: 'calc(100vh - 80px - ' + collapse.value.length * 40 + 'px)' }">
          <el-tree v-if="item.id === collapse.active" accordion :data="dir.data" node-key="id"
            :default-checked-keys="dir.checkedKeys" :default-expanded-keys="dir.expandedKeys" :props="defaultProps"
            @node-click="handleNodeClick">
            <template #default="{ node, data }">
              <div class="asideMenu-item">
                <i :style="{ backgroundImage: 'url(' + png(data) + ')' }"></i>
                <div :style="{ color: data.filepath === activeFilePath ? '#19f9b8' : '' }">{{ data.filename }}</div>
                <i @click.stop="settingFn(data)" class="asideMenu-setting"
                  :style="{ backgroundImage: 'url(' + settingPng + ')' }"></i>
              </div>
            </template>
          </el-tree>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 对文件操作 -->
    <el-dialog v-model="dialogForm.dialogFormVisible" title="文件操作">
      <el-form label-width="60px" size="small" :model="dialogForm.form">
        <el-form-item label="执行操作">
          <el-radio-group v-model="dialogForm.radio" size="small">
            <el-radio-button label="重命名" />
            <el-radio-button v-if="dialogForm.form.type == 'dir'" label="创建" />
            <el-radio-button label="删除" />
          </el-radio-group>
        </el-form-item>
        <template v-if="dialogForm.radio === '创建'">
          <el-form-item label="文件名">
            <el-input v-model="dialogForm.childForm.filename" placeholder="Approved by" clearable />
          </el-form-item>
          <el-form-item label="文件类型">
            <el-radio-group v-model="dialogForm.childForm.radio">
              <el-radio label="dir">文件夹</el-radio>
              <el-radio label="md">md文件</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="文件名">
            <el-input :disabled="dialogForm.radio !== '重命名'" v-model="dialogForm.form.filename" placeholder="Approved by"
              clearable />
          </el-form-item>
        </template>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="samll" @click="dialogForm.dialogFormVisible = false">取消</el-button>
          <el-button size="samll" type="primary" @click="confirm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import useFileStore from '@/store/file';
import filePng from '@/assets/file/file.png';
import dirPng from '@/assets/file/dir.png';
import settingPng from '@/assets/file/setting.png';
import { storeToRefs } from 'pinia';


const fileStore = useFileStore();
const { activeFilePath, dirPath } = storeToRefs(fileStore);
const { fileSend, fileOn } = window.electronApi;
interface resultTypes {
  type: "file" | "dir",
  filename: string,
  id: number | string,
  filepath: string,
  children?: resultTypes[]
}
// 弹窗
interface diaFormTypes {
  dialogFormVisible: boolean,
  radio: '重命名' | '创建' | '删除',
  form: resultTypes,
  childForm: {
    filename: string,
    radio: 'md'
  }
}

const dialogForm = reactive<diaFormTypes>({
  dialogFormVisible: false,
  radio: '重命名',
  form: {
    filename: Date.now().toString(),
    type: 'file',
    id: 0,
    filepath: ''
  },
  childForm: {
    filename: Date.now().toString(),
    radio: 'md',
  }
})
// 设置
const settingFn = (data: resultTypes) => {
  dialogForm.radio = '重命名',
    dialogForm.childForm = {
      filename: Date.now().toString(),
      radio: 'md',
    }
  dialogForm.form = data;
  dialogForm.dialogFormVisible = true;
}
// 弹窗操作
const confirm = () => {
  try {
    console.log(Object.assign({}, dialogForm))
    const oldpath = dialogForm.form.filepath;
    switch (dialogForm.radio) {
      case '重命名':
        fileSend({
          type: 'rnameFile', data: {
            oldpath,
            value: { filename: dialogForm.form.filename }
          }
        })
        break;
      case '创建':
        fileSend({
          type: 'createFile', data: {
            oldpath,
            value: Object.assign({}, dialogForm.childForm)
          }
        })
        break;
      case '删除':
        fileSend({
          type: 'deleteFile', data: {
            oldpath,
          }
        })
        break;
      default:
        break;
    }
  } finally {
    dialogForm.dialogFormVisible = false
  }
}

// 外层
interface collapseTypes {
  value: { title: string, id: string }[],
  active: string
}
const collapse = reactive<collapseTypes>({
  value: [],
  active: '',
});



// 内层

// 文件目录
interface dirTypes { data: resultTypes[], checkedKeys: number[], expandedKeys: number[] }
const dir = reactive<dirTypes>({
  data: [],
  expandedKeys: [],
  checkedKeys: []
});

const handleNodeClick = (data: resultTypes) => {
  if (data.type === 'file') {
    // @ts-ignore
    dir.checkedKeys = [data.id];
    fileStore.updateActiveFilePath(data.filepath);
  }

}

const defaultProps = {
  children: 'children',
  label: 'filename',
}

// 文件图标
const png = (data: resultTypes) => {
  return data.type === 'dir' ? dirPng : filePng
}

// 监听通信
fileOn(function (event: any, message: any) {
  const { type, data } = message;
  switch (type) {
    case 'getDirList':
      if (data === '') {
        fileStore.updateDirPath('');
      } else {
        const { filename, id, children: value } = data;
        collapse.value[0] = { title: filename, id };
        collapse.active = id;

        dir.data = value;
        dir.expandedKeys = value.length > 0 ? [value[0]['id']] : [];

      }
      break;
    default:
      return false;
  }
})
watch(() => fileStore.dirPath, (newVal) => {
  // 获取文件目录
  fileSend({ type: 'getDirList', data: fileStore.dirPath })
}, {
  immediate: true,
})
</script>
<style lang="scss">
.home-asideMenu {
  .el-collapse {
    background: transparent;
    border: 0;

    .el-collapse-item__header,
    .el-collapse-item__wrap {
      background: transparent;
      color: #07a1b2;
      border: 0;
    }

    .el-collapse-item__header {
      background-color: rgba($color: #19f9b8, $alpha: 0.1);
      text-align: left;
      box-sizing: border-box;
      padding-left: 10px;
      height: 40px;
    }

    .el-collapse-item__content {
      color: #07a1b2;

    }

    .el-tree-node__content {

      &:hover {
        background-color: rgba($color: #07a1b2, $alpha: 0.2);
      }
    }

  }

  .collapse-nowarp {
    width: 150px;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的文本 */
    text-overflow: ellipsis;
    position: relative;
    padding-right: 20px;

    /* 显示省略号 (...) */
    i {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: absolute;
      right: 4px;
      top: 17px;
    }
  }

  .collapse-div {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      width: 0;
      height: 0
    }
  }


  .el-tree {
    background: transparent;
    color: #07a1b2;

    .el-tree-node--selected {
      // background-color: lightblue;
      /* 选中节点的背景颜色 */
      color: #19f9b8;
      /* 选中节点的文本颜色 */
    }
  }
}
</style>
<style lang="scss" scoped>
.home-asideMenu {
  height: calc(100vh - 80px);
  position: relative;
  width: 200px;
  text-align: left;
  overflow: hidden;




  .asideMenu-item {

    width: 100%;
    display: flex;
    align-items: center;

    >div {
      width: calc(100% - 21px);
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 隐藏溢出的文本 */
      text-overflow: ellipsis;
      /* 显示省略号 (...) */
    }

    i {
      margin-right: 5px;
      display: inline-block;
      width: 16px;
      height: 16px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .asideMenu-setting {
      display: none;
      margin-right: 0px;
      position: absolute;
      right: 5px;
    }

    &:hover {
      >div {
        width: calc(100% - 42px);
      }

      .asideMenu-setting {
        display: inline-block;
      }
    }
  }


  &::before {
    content: "";
    border-right: 1px solid #555;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
  }

}
</style>